<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <script src="js/jquery-3.1.1.js"></script>
    <title>03-点击加号上传图片</title>
<style>
   input{
       display: none;
   } 
   img{
       width: 100px;
       height: 100px;
   }

</style>
</head>
<body>
    <form action="">
         <div id="chooseImg">
             <img src="images/add.png">
             <input type="file">
             <img src="images/add.png" alt="">
             <input type="file">
             <img src="images/add.png" alt="">
             <input type="file">
         </div>
         <button type="button">添加</button>
         <button type="submit">上传</button>  
    </form>
</body>
<html>
<script>
    //点击添加按钮,添加一对<img>和<input>
    $('button').eq(0).click(function(){
        $('#chooseImg').append('<img src="images/add.png" alt="">');
        console.dir(chooseImg);
    });

//点击图片实现选择文件的效果
//如果想要给后添加的占位图,也实现选择文件的效果,最好使用代理事件.否则
//click().新添加的占位图不能实现选择文件的效果
//delegate()为匹配的每一个元素绑定一个事件
//用法delegate(selector,event,func)
//selector：选择器,选择给谁绑定事件 
//event:事件类型，比如click
//func: 当触发事件后执行的操作 
// $('#chooseImg').delegate('img','click',function(){
//     console.dir(this);
//     $(this).next().click();
// });

//delegate()已经被弃用,可以使用on()来代替
//用法 on(event,selector,func)  
$('#chooseImg').on('click','img',function(){
    $(this).next().click();
});

 // 显示图片的时候也要用delegate，理由同上
    // $('#chooseImg').delegate('input','change',function(){
    //     var file = this.files[0];
    //     if(file.type.startsWith('image')){
    //         $(this).prev().attr('src',URL.createObjectURL(file));
    //     }else{
    //         alert('只能上传图片');
    //     }
    // });
    $('#chooseImg').on('change','input',function(){
        var file = this.files[0];
        if(file.type.startsWith('image')){
            $(this).prev().attr('src',URL.createObjectURL(file));
        }else{
            alert('只能上传图片');
        }
    });
   

</script>